<template>
	<div>
		<div class="login-container">
			<el-form v-if="pageFlag=='register'" class="login-form" ref="rgsForm" :model="ruleForm">
				<div class="login-title">社区团购管理系统注册</div>
				
				<!-- 用户注册表单 -->
				<template v-if="tableName=='yonghu'">
					<div class="form-columns">
						<div class="form-column">
							<div class="form-item">
								<div class="form-label">账号</div>
								<el-input class="form-input" v-model="ruleForm.zhanghao" placeholder="请输入账号" prefix-icon="el-icon-user"></el-input>
							</div>
							<div class="form-item">
								<div class="form-label">密码</div>
								<el-input class="form-input" v-model="ruleForm.mima" type="password" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
							</div>
							<div class="form-item">
								<div class="form-label">确认密码</div>
								<el-input class="form-input" v-model="ruleForm.mima2" type="password" placeholder="请确认密码" prefix-icon="el-icon-lock"></el-input>
							</div>
							<div class="form-item">
								<div class="form-label">姓名</div>
								<el-input class="form-input" v-model="ruleForm.xingming" placeholder="请输入姓名" prefix-icon="el-icon-user"></el-input>
							</div>
						</div>
						<div class="form-column">
							<div class="form-item">
								<div class="form-label">性别</div>
								<el-select v-model="ruleForm.xingbie" class="form-input" placeholder="请选择性别">
									<el-option v-for="(item,index) in yonghuxingbieOptions" :key="index" :label="item" :value="item"></el-option>
								</el-select>
							</div>
							<div class="form-item">
								<div class="form-label">手机</div>
								<el-input class="form-input" v-model="ruleForm.shouji" placeholder="请输入手机号" prefix-icon="el-icon-mobile-phone"></el-input>
							</div>
							<div class="form-item">
								<div class="form-label">邮箱</div>
								<el-input class="form-input" v-model="ruleForm.youxiang" placeholder="请输入邮箱" prefix-icon="el-icon-message"></el-input>
							</div>
							<div class="form-item">
								<div class="form-label">头像</div>
								<file-upload tip="点击上传头像" action="file/upload" :limit="3" :multiple="true" :fileUrls="ruleForm.touxiang?ruleForm.touxiang:''" @change="yonghutouxiangUploadChange"></file-upload>
							</div>
						</div>
					</div>
				</template>

				<!-- 商家注册表单 -->
				<template v-if="tableName=='shangjia'">
					<div class="form-columns">
						<div class="form-column">
							<div class="form-item">
								<div class="form-label">商铺编号</div>
								<el-input class="form-input" v-model="ruleForm.shangpubianhao" placeholder="请输入商铺编号" prefix-icon="el-icon-office-building"></el-input>
							</div>
							<div class="form-item">
								<div class="form-label">密码</div>
								<el-input class="form-input" v-model="ruleForm.mima" type="password" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
							</div>
							<div class="form-item">
								<div class="form-label">确认密码</div>
								<el-input class="form-input" v-model="ruleForm.mima2" type="password" placeholder="请确认密码" prefix-icon="el-icon-lock"></el-input>
							</div>
							<div class="form-item">
								<div class="form-label">商铺名称</div>
								<el-input class="form-input" v-model="ruleForm.shangpumingcheng" placeholder="请输入商铺名称" prefix-icon="el-icon-shop"></el-input>
							</div>
						</div>
						<div class="form-column">
							<div class="form-item">
								<div class="form-label">商铺地址</div>
								<el-input class="form-input" v-model="ruleForm.shangpudizhi" placeholder="请输入商铺地址" prefix-icon="el-icon-location"></el-input>
							</div>
							<div class="form-item">
								<div class="form-label">联系电话</div>
								<el-input class="form-input" v-model="ruleForm.lianxidianhua" placeholder="请输入联系电话" prefix-icon="el-icon-phone"></el-input>
							</div>
							<div class="form-item">
								<div class="form-label">商铺图片</div>
								<file-upload tip="点击上传商铺图片" action="file/upload" :limit="3" :multiple="true" :fileUrls="ruleForm.shangputupian?ruleForm.shangputupian:''" @change="shangjiashangputupianUploadChange"></file-upload>
							</div>
						</div>
					</div>
				</template>

				<div class="btn-group">
					<el-button type="primary" class="register-btn" @click="login()">注册</el-button>
					<el-button type="warning" class="login-btn" @click="close()">返回登录</el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			ruleForm: {
                xingbie: '',
			},
            pageFlag : '',
			tableName:"",
			rules: {},
            yonghuxingbieOptions: [],
		};
	},
	mounted(){
        this.pageFlag = this.$storage.get("pageFlag");
		let table = this.$storage.get("loginTable");
		this.tableName = table;
        this.yonghuxingbieOptions = "男,女".split(',')
	},
	created() {
    
	},
	destroyed() {
		  	},
	methods: {
		// 获取uuid
		getUUID () {
			return new Date().getTime();
		},
		close(){
			this.$router.push({ path: "/login" });
		},
        yonghutouxiangUploadChange(fileUrls) {
            this.ruleForm.touxiang = fileUrls;
        },
        shangjiashangputupianUploadChange(fileUrls) {
            this.ruleForm.shangputupian = fileUrls;
        },

        // 多级联动参数

		// 注册
		login() {
			var url=this.tableName+"/register";
					if((!this.ruleForm.zhanghao) && `yonghu` == this.tableName){
						this.$message.error(`账号不能为空`);
						return
					}
					if((!this.ruleForm.mima) && `yonghu` == this.tableName){
						this.$message.error(`密码不能为空`);
						return
					}
					if((this.ruleForm.mima!=this.ruleForm.mima2) && `yonghu` == this.tableName){
						this.$message.error(`两次密码输入不一致`);
						return
					}
					if((!this.ruleForm.xingming) && `yonghu` == this.tableName){
						this.$message.error(`姓名不能为空`);
						return
					}
					if(`yonghu` == this.tableName && this.ruleForm.shouji&&(!this.$validate.isMobile(this.ruleForm.shouji))){
						this.$message.error(`手机应输入手机格式`);
						return
					}
					if(`yonghu` == this.tableName && this.ruleForm.youxiang&&(!this.$validate.isEmail(this.ruleForm.youxiang))){
						this.$message.error(`邮箱应输入邮件格式`);
						return
					}
            if(this.ruleForm.touxiang!=null) {
                this.ruleForm.touxiang = this.ruleForm.touxiang.replace(new RegExp(this.$base.url,"g"),"");
            }
					if((!this.ruleForm.shangpubianhao) && `shangjia` == this.tableName){
						this.$message.error(`商铺编号不能为空`);
						return
					}
					if((!this.ruleForm.mima) && `shangjia` == this.tableName){
						this.$message.error(`密码不能为空`);
						return
					}
					if((this.ruleForm.mima!=this.ruleForm.mima2) && `shangjia` == this.tableName){
						this.$message.error(`两次密码输入不一致`);
						return
					}
					if((!this.ruleForm.shangpumingcheng) && `shangjia` == this.tableName){
						this.$message.error(`商铺名称不能为空`);
						return
					}
					if(`shangjia` == this.tableName && this.ruleForm.lianxidianhua&&(!this.$validate.isMobile(this.ruleForm.lianxidianhua))){
						this.$message.error(`联系电话应输入手机格式`);
						return
					}
            if(this.ruleForm.shangputupian!=null) {
                this.ruleForm.shangputupian = this.ruleForm.shangputupian.replace(new RegExp(this.$base.url,"g"),"");
            }
			
			this.$http({
				url: url,
				method: "post",
				data:this.ruleForm
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.$message({
						message: "注册成功",
						type: "success",
						duration: 1500,
						onClose: () => {
							this.$router.replace({ path: "/login" });
						}
					});
				} else {
					this.$message.error(data.msg);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
  position: fixed;
  top: 0;
  left: 0;

  .login-form {
    width: 800px;
    padding: 30px;
	height: 50vh;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .login-title {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
  }

  .form-columns {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }

  .form-column {
    flex: 1;
  }

  .form-item {
    margin-bottom: 20px;
  }

  .form-label {
    font-size: 14px;
    color: #606266;
    margin-bottom: 8px;
  }

  .form-input {
    width: 100%;
    
    /deep/ .el-input__inner {
      height: 40px;
      line-height: 40px;
      border-radius: 4px;
      padding-left: 35px;
      border: 1px solid #DCDFE6;
      
      &:focus {
        border-color: #409EFF;
        box-shadow: 0 0 5px rgba(64,158,255,0.2);
      }
    }
    
    /deep/ .el-input__prefix {
      left: 10px;
    }
  }

  .btn-group {
    margin-top: 30px;
    text-align: center;
    
    .register-btn, .login-btn {
      width: 45%;
      height: 40px;
      border-radius: 4px;
      font-size: 14px;
      letter-spacing: 1px;
      
      &:hover {
        opacity: 0.9;
      }
    }
    
    .register-btn {
      margin-right: 8px;
    }
  }

  // 文件上传样式
  /deep/ .el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 100px;
    margin: 0 8px;
  }

  /deep/ .el-upload-list--picture-card .el-upload-list__item {
    width: 100px;
    height: 100px;
  }
}
</style>